<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>06-条件渲染</title>
    <script src="react.development.js" type="text/javascript" charset="UTF-8"></script>
    <script src="react-dom.development.js" type="text/javascript" charset="UTF-8"></script>
    <script src="babel.min.js" type="text/javascript" charset="UTF-8"></script>
</head>
<body>
    <div id="app">
        
    </div>
</body>
<script type="text/babel">
    function UserGreeting(props) {
        return <h1>Welcome back!</h1>;
    }

    function GuestGreeting(props) {
        return <h1>Please sign up!</h1>;
    }

    /*组件发生更新的条件：
     *1、自己的state发生改变
     *2、props属性值发生改变
     *3、继承了React.Component的父组件重新渲染时无论props/state是否发生改变子组件都会重新渲染
     *4、继承了React.PureComponent的父组件重新渲染时若props/state没发生改变子组件不会重新渲染
     */
    //创建Greeting组件，根据用户是否登录来切换显示的组件
    function Greeting(props) {
        const isLoggedIn = props.isLoggedIn;
        if(isLoggedIn){
            return <UserGreeting />
        }
        else{
            return <GuestGreeting />
        }
    }

    //ReactDOM.render(
    //    <Greeting isLoggedIn={false}/>,
    //    document.getElementById("app")
    //);
    //---------------------------------------------------------

    function LoginButton(props) {
        return (
            <button onClick={props.onClick}>
                Login
            </button>
        );
    }

    function LogoutButton(props) {
        return (
            <button onClick={props.onClick}>
                Logout
            </button>
        );
    }

    class LoginControl extends React.Component {
        constructor(props) {
            super(props);
            this.handleLoginClick = this.handleLoginClick.bind(this);
            this.handleLogoutClick = this.handleLogoutClick.bind(this);
            this.state = {isLoggedIn:false};
        }

        handleLoginClick() {
            this.setState({isLoggedIn: true});
        }

        handleLogoutClick() {
            this.setState({isLoggedIn: false});
        }

        render() {
            const isLoggedIn = this.state.isLoggedIn;
            let button;
            //1、使用if...else...
            //if(isLoggedIn) {
            //    //把方法赋值给onClick变量
            //    button = <LogoutButton onClick={this.handleLogoutClick} />
            //}
            //else {
            //    //把方法赋值给onClick变量
            //    button = <LoginButton onClick={this.handleLoginClick} />
            //}
            //2、使用三元运算符
            button = isLoggedIn ? <LogoutButton onClick={this.handleLogoutClick} /> : <LoginButton onClick={this.handleLoginClick} />;
            //3、阻止组件渲染（若show的值是false，则组件不会渲染）
            if(!props.show) {
                return null;
            }
            return (
                <div>
                    <Greeting isLoggedIn={isLoggedIn} />   
                    {/*button是变量，输出button的变量值*/}
                    {button}
                </div>
            );
        }
    }

    ReactDOM.render(
        <LoginControl />,
        document.getElementById("app")
    );
    //---------------------------------------------------------

    function Mailbox(props) {
        const unreadMessages = props.unreadMessages;
        return (
            <div>
                <h1>Hello!</h1>
                {/*利用&&运算的短路特性，仅当存在未读信息时才展现提示信息*/}
                {unreadMessages.length>0 && 
                 <h2>
                    You have {unreadMessages.length} unread messages.
                 </h2>
                }
            </div>
        );
    }

    const messages = ['React01','React02','React03'];
    //ReactDOM.render(
    //   <Mailbox unreadMessages={messages} />,
    //    document.getElementById("app")
    //);
</script>
</html>